<template>
  <div>
    <div class="dashboard-guide">
      <Guide :data="guideData"></Guide>
    </div>
    <a-modal v-model="modalObj.visible" :title="modalObj.title" :footer="null">
      <div class="disFlxAC flexCol flexCenter gap-24">
        <viewer :images="[modalObj.img]">
          <img :src="modalObj.img" alt="" style="width: 280px;" />
        </viewer>
        <p>{{ modalObj.desc }}</p>
      </div>
    </a-modal>
  </div>
</template>
<script>
import Guide from '@/components/Guide'
import guide03 from '@/assets/guide-03.png'
import guide01 from '@/assets/guide-01.png'
import guide02 from '@/assets/guide-02.png'
export default {
  components: {
    Guide
  },
  data() {
    return {
      guideData: [
        {
          icon: guide01,
          text: '咨询客服',
          operate: () => {
            this.modalObj.visible = true
            this.modalObj.title = '咨询客服'
            this.modalObj.img = 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/customer-service.jpg'
            this.modalObj.desc = '扫描二维码联系客服，获取支持'
          }
        },
        {
          icon: guide02,
          text: '运营技巧',
          operate: () => {
            this.modalObj.visible = true
            this.modalObj.title = '运营技巧'
            this.modalObj.img = 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/shangxiebang_qrcode.png'
            this.modalObj.desc = '关注“商协邦服务”公众号，学习更多运营技巧，获取新功能上线通知'
          }
        },
        {
          icon: guide03,
          text: '操作手册',
          operate: () => {
            window.open('https://www.yuque.com/hbkj2024/mdvank?#')
          }
        }
      ],
      modalObj: {
        visible: false,
        title: '咨询客服',
        img: '',
        desc: ''
      }
    }
  },

  methods: {}
}
</script>
<style lang="less" scoped>
.dashboard-guide {
  position: fixed;
  right: 0;
  bottom: 20%;
  z-index: 999;
}
</style>
